<template>
<KeepAlive>
  <component :is="tabComponent"></component>
</KeepAlive>

<button @click="change">切换组件</button>
</template>

<script>
import { defineAsyncComponent } from 'vue';
// import ComponentA from './components/ComponentA.vue';
const ComponentA=defineAsyncComponent(()=>
import("./components/ComponentA.vue")
)
const ComponentB=defineAsyncComponent(()=>
import("./components/ComponentB.vue")
)
export default{
  data(){
    return{
      tabComponent:"ComponentA"
    }
  },

  methods:{
    change(){
      this.tabComponent=this.tabComponent=="ComponentA"?"ComponentB":"ComponentA"
    }
  },
  components:{
    ComponentA,
    ComponentB
  }
}
</script>




<!-- <template>
  <div>
    <p ref="qq">{{ msg }}</p>
    <button @click="getContent" ref="qq">{{ msg }}</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:"qqq"
    }
  },
  methods: {
    getContent() {
      // 在方法中访问ref元素
      this.msg="我帅"
    }
  }
  
  
};
</script> -->


<!-- <template>
<SlotsTwo>
<h3>
{{ msg }}
</h3>

</SlotsTwo>

</template>

<script>

import SlotsTwo from './components/SlotsTwo.vue';

export default{
components:{
  SlotsTwo,

},
data(){
  return{
    msg:"shshshs"
  }
}
}
</script> -->








<!-- <template>
    <p :class="{'active':isActive}">Class绑定</p>
    <p :class="classObject">Class绑定2</p>
    <p :class="classBind">ClassTest</p>
    <p v-for="item in arr">{{ item }}</p>
</template>

<script>
export default{
    data(){
        return{
            isActive:true,

            arr:["jack","baj","ads"],

            classBind:{
                'ss':false,
                'dd':false
            },

            classObject:{
                'active':false
            }
        }
    }
}
</script> -->


<!-- <template>
<SlotsBase
  <div>
    <h3>插槽标题</h3>
    <p :class="getHtml" :gq="gqv">插槽内容</p>

  </div>

</SlotsBase>
</template>


<script>
import SlotsBase from './components/SlotsBase.vue';
export default{
  components:{
    SlotsBase
  },
  data(){
    return{
      getHtml:
        "get",
        gqv:false
      
    
    }
  }
}
</script>

<style>
.get{
  color:red
}
</style> -->






<!-- <template>
  <h3>{{ msg }}</h3>
</template>
<script>
export default{
  data(){
    return{
      msg:"1111"
    }
  }
}
</script> -->



<!-- <template>

  <h3 class="get">wosdh</h3>
</template>

<script>
export default{
  data(){
    return{
      
    }
  }
}
</script>

<style>

.get{
  color:red
}
</style> -->